<template>
    <div class='tinymce-div'>
        <tinymce id="editor" v-model="allData" :other_options='options'></tinymce>
        <button @click='clickEvent'>点击</button>
    </div>
    
</template>

<script>
import tinymce from 'vue-tinymce-editor';
export default{
    data(){
        return {
            allData: '',  //富文本编辑框中的内容
            //其他的选购想，可以覆盖init初始化选项配置
            options: {
                language_url: '/libs/js/zh_CN.js',  //语言
                height:400,
                /**扩展插件
                * 去掉了打印(print)、查找和替换(searchreplace)、模板(template)、源代码(code)、帮助(help)
                **/
                plugins: ['advlist autolink lists link image charmap preview hr anchor pagebreak', 
                    'wordcount visualblocks visualchars fullscreen', 
                    'insertdatetime media nonbreaking save table contextmenu directionality',
                    'paste textcolor colorpicker textpattern imagetools toc emoticons hr codesample'
                ],
            }
        }
    },
    components: {
        tinymce
    },
    methods: {
        //插件已经帮我们html转义了
        clickEvent(){
            console.log(this.allData);
        }
    }
}
</script>

<style lang="less">
    
</style>